<template>
  <div class="student-select">
    <p class="student-select-title">车辆查询</p>
    <el-select
      class="input-with-select"
      v-model="carId"
      filterable
      remote
      reserve-keyword
      placeholder="输入车牌号查询"
      :remote-method="remoteMethod"
      :loading="loading">
      <el-option
        v-for="item in options4"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-button class="submit-chaxun" slot="append" icon="el-icon-search" @click="select">查询</el-button>
  </div>
</template>

<script>
export default {
  name: "carSlect",
  mounted() {
    // 远程获取车辆车牌号列表
    this.$http.get(
      process.env.JXH_API_HOST +
        "api/cars/" +
        session.get(process.env.SESSION_KEY_LICENSEINFO).companyId,
      d => {
        if (d.resultCode == 0) {
          this.list = d.record.map(item => {
            return { value: item.carId, label: item.plateNumber };
          });
        } else {
          layer.msg(d.msg);
        }
      }
    );
  },
  data() {
    return {
      options4: [],
      carId: "",
      list: [],
      loading: false
    };
  },
  computed: {
    carInfor() {
      let _tmp = this.options4.filter(e => {
        return e.value == this.carId;
      });
      if (_tmp.length > 0) {
        return {
          carId: _tmp[0].value,
          plateNumber: _tmp[0].label
        };
      } else {
        return {};
      }
    }
  },
  methods: {
    // 车辆车牌号filter
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options4 = this.list.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options4 = [];
      }
    },
    // select
    select() {
      this.$emit("onSelect", this.carInfor);
    }
  }
};
</script>

<style scoped>
.student-select {
  position: relative;
}
.submit-chaxun {
  position: absolute;
  right: 0;
  bottom: 50px;
  right: 3%;
}
.input-with-select {
  width: 100%;
}
</style>
